<template>
	<view class="nav">
		<my-topbar @changeActiveIndex="changeActive" :activeIndex="activeIndex" :topbarList="topbarList"
			:bgColor="bgColor" :textColor="textColor" :textFontSize="textFontSize">
		</my-topbar>
	</view>
</template>

<script>
	import myTopbar from '@/components/common/my-topbar-animation/my-topbar-animation.vue'

	export default {
		props: ['activeIndex'],
		components: {
			myTopbar
		},
		data() {
			return {
				topbarList: [{
						id: 1,
						text: '好友',
						fid: 2,
					},
					{
						id: 2,
						text: '群组',
						fid: 3
					},
					{
						id: 3,
						text: '黑名单',
						fid: 5
					}
				],
				bgColor: '#ffffff',
				textColor: 'red',
				textFontSize:'34rpx'
			}
		},
		methods: {
			changeActive(id, item) {
				//console.log(id)
				this.$emit('changeActiveItem', item)
				//this.activeIndex = id
			}
		}
	}
</script>

<style lang="scss" scoped>
	
</style>















<!-- <template>
	<view>
		<my-navbar :activeIndex="activeIndex" :barList="barList" @changeActiveItem="changeActiveItem"></my-navbar>
	</view>
</template>

<script>
	import myNavbar from '@/components/common/my-navbar/my-navbar.vue'

	export default {
		props: ['activeIndex'],
		components: {
			myNavbar
		},
		data() {
			return {
				barList: [{
						id: 0,
						name: '好友',
						fid: 2,
					},
					// {
					// 	id: 1,
					// 	name: '关注',
					// 	fid: 1
					// },
					// {
					// 	id: 2,
					// 	name: '粉丝',
					// 	fid: 4
					// },
					{
						id: 2,
						name: '群组',
						fid: 3
					},
					{
						id: 3,
						name: '黑名单',
						fid: 5
					}
				]
			}
		},
		methods: {
			changeActiveItem(item) {
				this.$emit('changeActiveItem', item)
			}
		}
	}
</script>

<style>
</style>
 -->